<template>
  <div>
    <div class="livevideo" ref="video">
      <videoPlayer :wWidth="0" :wHeight="0" :isPhone="$store.state.isMobile" @questionnaireTypeFun="questionnaireType = true"></videoPlayer>
    </div>
    <Message :msgHeight="msgHeight" :isPhone="$store.state.isMobile"></Message>
    <returnIndex :isPhone="$store.state.isMobile" :state="true"></returnIndex>
<!--    <returnDay :isPhone="$store.state.isMobile"></returnDay>-->


    <van-popup v-model="questionnaireType" closeable round style="width: 80%;" class="_wz_App_van-popup"  :close-on-click-overlay="false">
      <questionnaireInvestigation></questionnaireInvestigation>
    </van-popup>
  </div>
</template>
<script>
import Message from "@/components/Message.vue";
import returnIndex from "@/components/return.vue";
import returnDay from "@/components/returnDay.vue";
import videoPlayer from "@/components/videoPlayer.vue";
import questionnaireInvestigation from "./questionnaireInvestigation.vue";

export default {
  components: {
    videoPlayer,//直播控件
    Message,//聊天列表
    returnIndex,//返回首页
    returnDay,//跳转会议
    questionnaireInvestigation,//问卷弹框
  },
  data() {
    return {
      msgHeight: 300,
      userData:{},
      studyTime:null,//学习定时
      questionnaireType:false,//问卷弹框
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态
    let that = this;
    window.addEventListener("resize", that.getHeight);
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    //手机功能
    let that = this;
    var allHeight = document.documentElement.clientHeight;
    let videoHeight = that.$refs.video.offsetHeight;
    that.msgHeight = allHeight - videoHeight - 50;

    // /*
    // * 此处需要获取用户数据
    // * 定时1分钟 向后台请求一次
    // * 如果30分钟后 执行弹框
    // *
    // * */
    // //判断用户是否登录
    // if (!localStorage.getItem("userData")) {
    //   // that.$refs.peoplePopup.open(that.$store.state.isMobile);
    // } else {
    //   that.userData = JSON.parse(localStorage.getItem("userData"))
    //
    //   that.studyTime = setInterval(function(){
    //     console.log('1分钟 向后台请求一次')
    //     console.log('在把用户的学习时长 +1，然后在存储到浏览器里面')
    //
    //     // 在把用户的学习时长 +1，然后在存储到浏览器里面
    //     that.http.forumAddTime({userId:that.userData.userId}).then(res => {
    //       if (res.status == 1000) {
    //         //学习时长
    //         that.userData.minute = parseInt(that.userData.minute) + 1;
    //         localStorage.setItem("userData", JSON.stringify(that.userData));
    //         if(that.userData.minute == 3 * 60){//两个小时后 弹框
    //           that.questionnaireType = true;
    //         }
    //
    //       }else{
    //         // that.$toast.fail({duration:5000,message:res.data.message,closeOnClick:true})
    //       }
    //     }).catch(err => {
    //       that.$toast.clear();
    //     });
    //
    //   },60 * 1000)
    //
    // }

  },
  methods: {//执行的方法
    getHeight() {
      let that = this;
      var allHeight = document.documentElement.clientHeight;
      let videoHeight = that.$refs.video.offsetHeight;
      that.msgHeight = allHeight - videoHeight - 50;
    },

  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态
    let that = this;
    window.removeEventListener("resize", that.getHeight, true);
    clearInterval(this.studyTime);

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style lang="scss">
.livevideo {
  width: 100%;
  z-index: 1;
}
.nutritionVideoPlayer > .video-js {
  overflow: hidden;
  // border-radius: 0.2rem;
  .vjs-big-play-button {
    // 大播放按钮
    position: absolute;
    top: 1.68rem;
    left: 3.2rem;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0);
    width: 1.06rem;
    height: 1.06rem !important;
    border-radius: 50%;
    background-color: #a9a9a9;
    border: none;
    &:focus {
      background-color: rgba(0, 0, 0, 0);
    }
    &:active {
      background-color: rgba(0, 0, 0, 0);
    }
    .vjs-icon-placeholder {
      //调整播放器样式
      &::before {
        color: #fff;
        font-size: 0.6rem;
        line-height: 1rem;
        margin-left: -0.02rem;
      }
    }
  }
  .vjs-control-bar {
    margin-left: -0.2rem;
    background-color: rgba(0, 0, 0, 0) !important;
    .vjs-play-control {
      // 重播按钮
      width: 0.8rem;
      z-index: 111;
      outline: none;
      bottom: 0.1rem;
      left: 0.15rem;
      .vjs-icon-placeholder {
        &::before {
          color: #fff;
          font-size: 0.4rem;
          padding-top: 0.1rem;
        }
      }
    }
    .vjs-fullscreen-control {
      position: absolute;
      right: 0rem;
    }

    .vjs-volume-panel-horizontal {
      position: absolute;
      right: 0.5rem;
    }
    .vjs-duration {
      // 总时间
      position: absolute;
      right: 0;
      color: #e2e2e2;
    }
    .vjs-current-time {
      // 播放时间
      position: absolute;
      left: 0.72rem;
      color: #e2e2e2;
    }
    .vjs-playback-rate {
      display: none;
    }
    .vjs-progress-control {
      position: absolute;
      bottom: 0.3rem;
      right: 0;
      width: 100%;
      left: 0.2rem;

      // 进度条
      .vjs-progress-holder {
        margin-left: -0.38rem;
        margin-right: 0.4rem;
        height: 0.1rem;
        background: #ddd;
        .vjs-load-progress {
          background: #b8b8b8;
        }
        .vjs-play-progress {
          background: #fd1216;
        }
      }
    }
  }
  .vjs-poster {
    background-size: cover;
  }
}
._wz_App_van-popup{
  background: none!important;
  .van-popup__close-icon--top-right{
    top: 20px;
    right: 20px;
  }
}
</style>
